<template>
	<view>
		<view class="default" :class="{ 'circle': isCircle }">
			<!-- 删除按钮 -->
			<view class="clear" v-if="vdata.hasImg && isShowClear && userIsShowClear">
				<!--  -->
				<image src="../../static/img/close.svg" @click.stop="logoutPopup.open()"></image>
				<!-- <image src="../../static/img/clear.svg" @click.stop="logoutPopup.open()"></image> -->
			</view>
			<view @click="previewImg" class="img-bg" :class="{ 'circle': isCircle }" v-if="vdata.hasImg">
				<image :src="vdata.assemblyUrl" class="img-suc" :class="{ 'circle': isCircle }" mode="aspectFit"></image>
			</view>
			<image v-if="!vdata.hasImg" class="camera" @click="chooseImg" src="../../static/img/upload.svg"></image>
		</view>

		<!-- 图片预览（手写非原生） -->
		<enlarge v-if="isPreview" :changeIsShow="props.isShowClear" :imgs="vdata.assemblyUrl" @enlargeClose="enlargeClose" @chooseImg="chooseImg" />

		<!-- 删除图片二次确认 -->
		<uni-popup ref="logoutPopup" type="dialog">
			<uni-popup-dialog mode="base" content="确定要删除该图片吗？" :before-close="true" @close="logoutPopup.close()" @confirm="clear">
				<!-- <template #title>
					<view class="tip-content">确定要删除该图片吗？</view>
				</template> -->
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import config from '@/env/env.development.js';
	import { ref, reactive, watch, onMounted, nextTick, defineExpose, getCurrentInstance } from 'vue'
	import { $ossFilesForm, $imgInfoDetail } from '@/http/apiManager.js'
	import storageManage from '@/util/storageManage.js';
	import enlarge from './enlarge.vue' // 图片预览
	import useBackPress from '@/hooks/useBackPress.js' // 返回阻断函数
	import { sm4DecryptByResData } from '@/util/encryptUtil.js'

	const { $infoBox } = getCurrentInstance().appContext.config.globalProperties

	const logoutPopup = ref(null) // 二次确认弹框

	const props = defineProps({
		upLoadUrl: { type: String, default: '/api/ossFiles/singleFile' }, // 默认图片
		imgUrl: { type: String, default: '' }, // 默认图片
		recogObjectType: { type: String, default: '' }, // 识别对象类型（idcard, idcard_back, bankcard, business_license）
		uploadCount: { type: Number, default: 1 }, // 上传图片张数
		size: { type: Number, default: 5 }, // 图片限制大小,单位M
		imgTypes: { type: Array, default: () => ['jpg', 'jpeg', 'png'] }, // 图片类型限制，如: ['jpg', 'jpeg']
		isShowClear: { type: Boolean, default: true }, // 进件成功不展示删除按钮与更换按钮
		ocrFlag: { type: String, default: '' }, // ocr识别标志，图片类型： idCard-身份证，bankCard-银行卡， license-营业执照
		userIsShowClear: { type: Boolean, default: true }, // 在其余页面中是否展示删除按钮
		bizType: { type: String, default: 'applyment' },
		isCircle: { type: Boolean, default: false }, // 头像形状	默认方
	})

	onMounted(() => {
		if (props.imgUrl) {
			vdata.hasImg = true
			vdata.assemblyUrl = props.imgUrl
		}
	})

	// 关闭图片预览
	const enlargeClose = () => {
		isPreview.value = false
		// #ifdef H5 || APP-PLUS
		inactive()
		// #endif
	}

	const vdata = reactive({
		hasImg: false,
		assemblyUrl: '',
	})

	watch(() => props.imgUrl, (newVal, oldVal) => {
		nextTick(() => {
			newVal ? vdata.hasImg = true : vdata.hasImg = false
			vdata.assemblyUrl = newVal
		})
	})

	const emit = defineEmits(['uploadSuccess', 'clear'])

	// OCR识别函数
	function imgInfoDetail(res) {

		$imgInfoDetail({
			imgUrl: res.data,
			type: props.ocrFlag
		}).then(({ bizData }) => {
			if (Object.keys(bizData).length < 1) {
				// $.toast('图片识别失败')
			} else {
				$infoBox.toast('图片识别成功，已自动回填内容，请检查核对')
			}
			res.ocrInfo = bizData
			return emit('uploadSuccess', res)
		})
	}

	function chooseImg(index) {
		if (props.isShowClear) {
			uni.chooseImage({
				count: props.uploadCount,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				crop: { quality: 20 },

				success: chooseImageRes => {
					isPreview.value = false //关闭图片预览
					const msg = beforeUpload(chooseImageRes);
					if (msg != 'success') {
						$infoBox.toast(msg)
						return
					}

					// 根据form信息，判断图片上传地址
					// 此处额外验证，上传的图片是否含有name属性，如果没有则用path代替
					let sourceFileName
					if (chooseImageRes.tempFiles[0].name) {
						sourceFileName = chooseImageRes.tempFiles[0].name
					} else {
						sourceFileName = chooseImageRes.tempFiles[0].path
					}

					$ossFilesForm({
						bizType: props.bizType,
						sourceFileName: sourceFileName,
						sourceFileSize: chooseImageRes.tempFiles[0].size
					}).then(({ bizData }) => {
						let url, isOss, ossImgUrl = ''
						if (bizData.formActionUrl === 'LOCAL_SINGLE_FILE_URL') {
							url = config.GZ_BASE_URL + props.upLoadUrl
							isOss = false
						} else {
							url = bizData.formActionUrl
							ossImgUrl = { data: bizData.ossFileUrl }
							isOss = true
						}

						// 调用图片上传方法
						uploadImg(chooseImageRes.tempFilePaths, url, bizData.formParams, isOss, ossImgUrl)

					})

				}
			});
		}

	}

	// 上传图片
	function uploadImg(tempFilePaths, url, formParams, isOss, ossImgUrl) {

		const token = storageManage.token()

		var successCount = 0; //多图时，上传成功数量
		var qualification = []; //多图存储

		uni.showLoading({ title: '上传中...' });
		//循环上传图片

		tempFilePaths.forEach(tempFilePath => {
			// console.log(url,tempFilePath,formParams,"22222222");
			uni.uploadFile({
				url: url,
				filePath: tempFilePath,
				name: 'file',
				header: {
					'Content-Type':'multipart/form-data'
				},
				formData: formParams,
				// 代表完成的函数 注：此处可以传入三个函数  success （成功）/ fail（失败） / complete （完成）
				complete(res) {
					// console.log(isOss,"isOss");
					// console.log(res,"res111");
					// console.log(res.header.Location,"res111");
					// console.log(decodeURI(res.header.Location),"22222222");

					uni.hideLoading()

					// oss接口特有情况
					if (isOss) {
						if (res.statusCode != 200 && res.statusCode != 204) {
							$infoBox.toast('请求失败，请重试')
						}

						// 如果存在OCR 识别信息，那么要调用ocr识别函数
						if (props.ocrFlag) return imgInfoDetail(ossImgUrl)
						emit('uploadSuccess', ossImgUrl)
						return vdata.hasImg = true
					}
					// res 即接口返回数据包
					let {
						statusCode, // 状态码
						data, // 数据
						msg, // 信息
						errMsg // 错误信息
					} = res;

					// console.log(res, "oss接口")
					// 接收请求，执行响应操作
					if (statusCode != 200) {
						$infoBox.toast('请求失败，请重试，statusCode：' + statusCode, { mask: true })
						return;
					}

					if (typeof data == 'string') {
						data = JSON.parse(data);
					}

					// 图片上传解密
					if (data.encryptData) {
						data.data = sm4DecryptByResData(data.encryptData)
					}

					//状态码为1001(未登录)
					if (data.code == 1001) {
						$infoBox.toast('请登录', { mask: true })
						setTimeout(function() {
							uni.reLaunch({
								url: '/pages/login/login'
							});
						}, 1500);
						return;
					}

					if (data.code != 0) {
						$infoBox.toast(data.msg || '请求失败，请重试', { mask: true, duration: 2000 })
						return;
					}

					// 如果存在OCR 识别信息，那么要调用ocr识别函数
					if (props.ocrFlag) return imgInfoDetail(data)
					// 没有遇到以上的情况
					emit('uploadSuccess', data)
					vdata.hasImg = true
				}
			})

		})
	}
	// 上传图片前的校验
	function beforeUpload(chooseImageRes) {

		const tempFiles = chooseImageRes.tempFiles;

		let msg = 'success';

		if (tempFiles) {
			for (let i = 0; i < tempFiles.length; i++) {
				// 图片地址
				let tempUrl = tempFiles[i].name || tempFiles[i].path;
				if (!tempUrl) {
					msg = '请选择图片';
					return msg;
				}
				// 校验图片大小
				if (tempFiles[i].size > props.size * 1024 * 1024) {
					msg = '单张图片请不超过' + props.size + 'MB';
					return msg;
				}
				// 校验后缀
				if (!checkSuffix(tempUrl)) {
					msg = '仅支持【' + props.imgTypes + '】格式的图片';
					return msg;
				}
			}
		} else {
			msg = '请选择图片';
			return msg;
		}

		if (chooseImageRes.tempFilePaths.length > props.uploadCount) {
			msg = '最多上传' + props.uploadCount + '张图片';
			return msg;
		}

		return msg;
	}
	// 校验图片后缀
	function checkSuffix(fileName) {
		const suffix = getFileSuffix(fileName).toLowerCase();
		if (props.imgTypes.includes(suffix)) {
			return true;
		}

		return false;
	}
	// 获取图片后缀
	function getFileSuffix(fileName) {
		if (!fileName || fileName.indexOf('.') < 0 || fileName.length <= 1) {
			return '';
		}
		return fileName.substring(fileName.lastIndexOf('.') + 1);
	}

	let isPreview = ref(false) // 图片预览是否展示
	// 预览图片
	function previewImg() {
		isPreview.value = true

		// #ifdef H5 || APP-PLUS
		active()
		// #endif
		// onceVar.imgView(true)

		// let urls = [];
		// urls.push(props.imgUrl)

		// uni.previewImage({
		// 	urls: urls
		// });
	}

	// 叉号  清除图片
	function clear() {
		vdata.hasImg = false
		emit('clear')
		logoutPopup.value.close()
	}

	// #ifdef H5 || APP-PLUS
	const { active, inactive } = useBackPress(enlargeClose) // onBackPress 阻断返回
	// #endif

	// 暴露上传
	defineExpose({ chooseImg })
</script>

<style scoped lang="scss">
	// 图片预览
	.preview-img {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: #000;
		z-index: 25;

	}

	.camera {
		width: 50rpx;
		height: 50rpx;
	}

	.default {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		background-color: #fff;
		border-radius: 5rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1rpx dashed #CCCDD9;
		box-sizing: border-box;
	}

	.img-bg {
		position: relative;
		width: 120rpx;
		height: 120rpx;
		background: #f1f1f1;
		border-radius: 12rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 10;

		/* margin-right: 30rpx; */
		image {
			height: 100%;
			width: 100%;
		}
	}

	.img-def {
		width: 43rpx;
		height: 37rpx;
	}

	.img-suc {
		width: 100%;
		/* height: 180rpx; */
		border-radius: 12rpx;
	}

	.clear {
		position: absolute;
		top: -10rpx;
		left: 90rpx;
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
		z-index: 12;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 30rpx;
			height: 30rpx;
		}

	}

	.tip-content {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 120rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #3981FF;
	}

	.circle {
		border-radius: 50%;
	}
</style>